<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/v2/console/common/taglibs.jsp"%>
<%@ include file="image_data.jsp"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
String contextPath = request.getContextPath();
%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta content="width=device-width, minimum-scale=1,initial-scale=1, maximum-scale=1, user-scalable=1" id="viewport" name="viewport" />
		<meta content="yes" name="apple-mobile-web-app-capable" />
		<meta content="black" name="apple-mobile-web-app-status-bar-style" />
		<meta content="telephone=no" name="format-detection" />
		<link rel="stylesheet" href="${path}/xkh_version_2/css/swiper-3.3.1.min.css" />
		<link rel="stylesheet" type="text/css" href="${path}/xkh_version_2/css/style.css" />
		<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
		<script src="${path}/wapstyle/js/template.js"></script>
		<script src="${path}/xkh_version_2/js/jquery-2.1.0.js"></script>
		<script type="text/javascript" src="${path}/xkh_version_2/js/swiper-3.3.1.jquery.min.js"></script>
		<title>校咖汇</title>
	</head>
	<body>
		<!--头部-->
		<header class="header-bar">
			<div class="status-bar" style="overflow:hidden;">
				<div class="come-num-box">
					<span class="come-num">
						<b>
							<i>1234</i>
							<i>1111</i>
							<i>1237</i>
							<i>2123</i>
							<i>2456</i>
							<i>${allNum}</i>
						</b>
					</span>
					<span class="come-font">个校园资源已经入驻</span>
				</div>
				 <span class="header_search">
					<img class="search_pic" src="${path}/xkh_version_2/img/icon_search.png" />
				</span> 
			</div>
			<!--点击搜索图标出现热门搜索-->
			<form id="tosearch" class="ctt_hot" method="post" action="${path}/home/getClassListSeach.html">
				<a href="javaScript:search()" class="hot_pic"><img class="search_pic" src="${path}/xkh_version_2/img/search.png" /></a>
				<input type="text" name="seachValue" id="searchValue" placeholder="搜索需要的资源类型" class="hot_inp" />
			</form>
			<span class="ctt_cancel">取消</span>
		</header>
		<!--头部搜索栏-->
		<div class="list_content">
			<span class="hot_word">搜索热词</span>
			<div class="search_list">
				<c:forEach items="${hotWords}" var ="hotWord" varStatus="status">
					<a href="${path}/home/getClassListSeach.html?seachValue=${hotWord.dicName }"><span>${hotWord.dicName }</span></a>
				</c:forEach>
			</div>
		</div>

		<!--轮播图部分-->
		<section>
			<div class="lunbo">
				<div class="swiper-container" >
		            <div id="slider" class="swiper-wrapper" >
		            <c:forEach items="${bannerInfos}" var ="bannerInfo" varStatus="status">
		            
						<a href="${bannerInfo.redirectUrl }" class="swiper-slide">
							<img src="${bannerInfo.picUrl }?${index_banner}"/>
							<p>${bannerInfo.name}</p> 
						</a>
					</c:forEach>
					</div>			
					<div class="swiper-pagination">
					</div>
      		   </div>
			</div>
			<!--小标题部分-->
			<ul class="ctt_title" id = "gallery">
				
			</ul>
			<!--10px的背景-->
			<div class="ctt_bg"></div>
			<!--校园资源-->
			<div class="ctt_resource">
				<span class="resource_pic"><img class="search_pic" src="${path}/xkh_version_2/img/resource.png" /></span>
				<span class="good_resource">校园资源</span>
				<a href="${path }/home/morePeople.html">
					<span class="more">更多</span>
					<span class="ctt_more"><img class="search_pic" src="${path}/xkh_version_2/img/more.png" /></span>
				</a>
			</div>
			<div class="new_content" id = "new_content">
				
			</div>
			<!--优质资源部分-->
			<div class="ctt_resource">
				<span class="resource_pic"><img class="search_pic" src="${path}/xkh_version_2/img/resource.png" /></span>
				<span class="good_resource">优质资源</span>
				<a href="${path }/home/moreResources.html">
					<span class="more">更多</span>
					<span class="ctt_more"><img class="search_pic" src="${path}/xkh_version_2/img/more.png" /></span>
				</a>
			</div>
			<div class="resource_content" id="special">
			</div>
			<!--10px的背景-->
			<div class="ctt_bg"></div>
			
		</section>
		<!--底部条-->
		<nav class="foot-bar-tab">
			<a class="foot-tab-item foot-active" href="${path }/home/index.html">
				<span class="foot-icon foot-icon-home"></span>
				<span class="foot-tab-label">首页</span>
			</a>
			<a class="foot-tab-item" href="${path}/prompt/prompt.html">
				<span class="foot-icon foot-icon-pub"></span>
				<span class="foot-tab-label">发布</span>
			</a>
			<a class="foot-tab-item" href="${path}/prompt/prompt.html">
				<span class="foot-icon foot-icon-bus"></span>
				<span class="foot-tab-label">已选</span>
			</a>
			<a class="foot-tab-item" href="${path }/home/getmyInform.html">
				<span class="foot-icon foot-icon-person"></span>
				<span class="foot-tab-label">我的</span>
			</a>
		</nav>
		<script id="skills" type="text/html">
			{{each classItem as value i }}
				<a href="${path}/home/getClassList.html?fid={{value.id}}">
				<li class="ctt_li">
					<span><img class="search_pic" src="{{value.imageURL}}?${index_skillClass}" /></span>
					<span>{{value.className}}</span>
				</li></a>
			{{/each}}
		</script>	
		<script id="specials" type="text/html">
			{{each classItem as value i }}
				<a href="{{value.jumpLink}}" class="resource_detail">
					<div class="detail_content">
						<img class="search_pic" src="{{value.imgerUrl}}?${index_youzhiziyuan}" />
						<div class="resource_marsk">
							<p>{{value.title}}</p>
						</div>
					</div>
					<p class="resource_explain">{{value.content}}</p>
				</a>
			{{/each}}
		</script>
		<script id="newUser" type="text/html">
			{{each list as value i }}
				<a href="${path}/home/getUserInfo.html?id={{value.id}}" class="ctt_new">
					{{if value.headPortrait != ""}}
						<div class="new_pic"><img src="{{value.headPortrait}}?${index_newUser}" class="search_pic" /></div>
					{{else}}
						<div class="new_pic"><img src="${path}/wapstyle/img/logoaaa.jpg" class="search_pic" /></div>
					{{/if}}
					
					<span class="new_title1">{{value.nickname}}</span>
					<span class="new_title2">{{value.schoolName}}</span>
				</a>
			{{/each}}
		</script>
		<script>
		
		$(function(){
			
			//一级分类
			var skillClass=${skillClass };
			var ery = template('skills',skillClass);
			document.getElementById('gallery').innerHTML = ery;
			
			//优质资源
			var specials=${spec };
			var special = template('specials',specials);
			document.getElementById('special').innerHTML = special;
			
			//最新大咖
			var newUsers=${usersJson};
			var newUser = template('newUser',newUsers);
			document.getElementById('new_content').innerHTML = newUser;
		});
		
		</script>
		
		<script>
		var baseP = "<%=basePath%>";
		window.onload=function(){
			 //获取当前浏览器url全路径,如: http://zhoubang85.com/chooseWXPay.jsp
	        var client = window.location.href;
	        var rPath='<%=contextPath%>/skillUser/getJSConfig.html';
			//请求后台，获取jssdk支付所需的参数
			$.ajax({
				type : 'post',
				url : rPath,
				dataType : 'json',
				data : {
					"clientUrl" : client
				//当前页面所在的浏览器URL全路径,由于该支付为jssdk支付，所以需要url地址.参与后台sign签名
				},
				cache : false,
				error : function() {
					alert("系统错误，请稍后重试");
					return false;
				},
				success : function(data) {
					//微信支付功能只有微信客户端版本大于等于5.0的才能调用
					var return_date = eval(data);
					if (parseInt(data[0].agent) < 5) {
						alert("您的微信版本低于5.0无法使用微信支付");
						return;
					}
					//JSSDK支付所需的配置参数，首先会检查signature是否合法。
					wx.config({
						debug : !true, //开启debug模式，测试的时候会有alert提示
						appId : return_date[0].appId, //公众平台中-开发者中心-appid
						timestamp : return_date[0].config_timestamp, //时间戳
						nonceStr : return_date[0].config_nonceStr, //随机字符串,不长于32位
						signature : return_date[0].config_sign, //这里的signature是后台使用SHA1签名算法得出，不是MD5，与下面的wx.chooseWXPay中的paySign不同，下面的paySign是后台使用MD5加密得出
						jsApiList : [ 'onMenuShareAppMessage','onMenuShareTimeline' ]
					});
	
					//上方的config检测通过后，会执行ready方法
					wx.ready(function() {
						wx.onMenuShareAppMessage({
						    title: "校咖汇", // 分享标题
						    desc: "校咖汇,校园资源共享平台!", // 分享描述
						    link: client, // 分享链接
						    imgUrl: baseP+'wapstyle/img/logosss.png', // 分享图标
						    type: '', // 分享类型,music、video或link，不填默认为link
						    dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
						    success: function () { 
						        // 用户确认分享后执行的回调函数
						    },
						    cancel: function () { 
						        // 用户取消分享后执行的回调函数
						    }
						});
						wx.onMenuShareTimeline({
						    title: "校咖汇", // 分享标题
						    desc: "校咖汇,校园资源共享平台!", // 分享描述
						    link: client, // 分享链接
						    imgUrl: baseP+'wapstyle/img/logosss.png', // 分享图标
						    type: '', // 分享类型,music、video或link，不填默认为link
						    dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
						    success: function () { 
						        // 用户确认分享后执行的回调函数
						    },
						    cancel: function () { 
						        // 用户取消分享后执行的回调函数
						    }
						});
	
	
					});
					wx.error(function(res) {
						//alert(res.errMsg);
					});
				}
			});
			
		};
		
	</script>

	</body>
	
	<script>
		function search(){
			//window.location.href="${path}/home/getClassListSeach.html?seachValue="+$("#searchValue").val();
			 $("#tosearch").submit();
		}
	
		//点击搜索图标出现隐藏部分
		$(".header_search").click(function() {
			$(".status-bar").hide();
			$("section").css("visibility", "hidden");
			$("nav").css("visibility", "hidden");
			$(".ctt_hot").css("display", "block");
			$(".ctt_cancel").css("display", "block");
			$(".list_content").css("display", "block");
		})
		$(".ctt_cancel").click(function() {
				$(".hot_inp").val("");
			});
			//轮播部分
		var mySwiper = new Swiper('.swiper-container',{
				loop:true,
				autoplay:3000,
				autoplayDisableOnInteraction:false, 
				pagination:'.swiper-pagination',
				paginationClickable:true	
				});
		/* 获取header高度 */
		var h=$(".status-bar").height();
		var hh=$(".ctt_hot").outerHeight(true);
		console.log(h)
		console.log(hh)
		$(".lunbo").css("margin-top",h);
		$(".list_content").css("margin-top",hh);
		
	</script>
	

</html>
